<template>
  <div>
    <div class="gd">
      <span class="day">调价日:{{ data.newtime }}</span>

      <div class="cell" @click="shouPup">
        <input class="text-hui" v-model="message" />
      </div>
    </div>
    <mt-popup
      closeOnClickModal="true"
      v-model="popupVisible"
      popup-transition="popup-fade"
      position="bottom"
      style="width: 100%; height: 30%"
    >
      <mt-picker
        style="width: 100%"
        :show-toolbar="true"
        :visible-item-count="5"
        :slots="slots"
        @change="onValuesChange"
      >
        <div class="picker_header">
          <div class="usi-btn" @click="abolish">取消</div>
          <div class="">请选择查看的地区</div>
          <div class="usi-btn" @click="define">确定</div>
        </div>
      </mt-picker>
    </mt-popup>
  </div>
</template>

<script>
export default {
  props: ["lun"],
  data() {
    return {
      value: "",
      data: "",

      //  // 油价列表的数值
      //   tableData: [],

      message: "安徽",
      slots: [
        {
          flex: 1,
          defaultIndex: 1,
          values: ["滑动寻找"],
        },
      ],
      popupVisible: false,
    };
  },
  mounted() {
    this.axios.get("/v1/swiper/lun").then((res) => {
      console.log(res);
      this.data = res.data[0];
      console.log(this.lun);
    });
  },
  methods: {
    getAdd() {
      let url = "v1/area";
      this.axios.get(url).then((res) => {
        // console.log(res.data);
        for (var index in res.data) {
          let item = res.data[index];
          // console.log(item.pid-1)
          this.slots[0].values[item.pid - 1] = item.pname;
          // console.log(this.slots[0].values)
        }
      });
    },

    // 点击“选择城市”，获取并显示城市列表弹框
    shouPup() {
      // 请求地址，获取所有地址列表
      this.getAdd();
      this.popupVisible = true;
    },

    // 地址发生改变时触发，获取改变后的地址
    onValuesChange(picker, values) {
      console.log("values:", values[0]);
      this.value = values[0];
      //$emit:触发事件，相当于：参数1(参数2)，即aabb(name)
      this.$emit("ab", this.value);
    },
    // 点击取消时
    abolish() {
      this.popupVisible = false;
    },
    // 点击确认时
    define() {
      this.message = this.value;
      this.popupVisible = false;
    },
  },
};
</script>
<style scoped>
.gd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.8vh;
}
.day {
  font-size: 1.1em;
}
.cell {
  display: inline-block;
}

.cell > .text-hui {
  width: 70px;
  text-align: right;
  border: none;
  margin-right: 5vw;
  font-size: 1.2em;
  caret-color: transparent;
}

.picker-toolbar {
  display: flex;
  justify-content: space-around;
  line-height: 40px;
  font-size: 16px;
}
.picker_header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.usi-btn {
  color: #ff6600;
}
</style>
